<template>
	<div id="cardrecharge" class="same-change-oldstyle">
		<div class="cardrechargewrap">
			<div class="same-head-box">
                <div class="saem-seat-box">
                    <div class="saem-seat-left">
                        <span>当前位置：</span>
                       <el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
							<el-breadcrumb-item>水卡充值</el-breadcrumb-item>
						</el-breadcrumb>
                    </div>
                    <div class="saem-seat-right">
                        <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                        <!-- <button class="same-search-btns" @click="returnBack">返回</button>	  -->
                    </div>
                </div>
            </div>
			<div class="carddes">
				<div class="balance">账户余额 <span class="balspan">{{PartnerQuota.account_recharge_balance}}</span> 元 <button class="btnb_style" @click="jumpbalance" type="button">充值</button></div>
				<div class="centBox">
					<div class="state">
						<p>读卡器状态：</p>
						<span :class=" state == '未连接' ? 'red' : 'green' ">{{state}}</span>
					</div>
					<div class="searchitems">
						<span style="margin-right: 10px">水卡卡号：</span>
						<el-input v-model='cardnum' placeholder="请输入水卡卡号" :disabled="true"></el-input>
						<!-- <input type="text" name="" /> -->
						<button @click="ReadCard()">读卡</button>
						<span class="balashow" v-if="datades != ''"> 余额 : ¥{{datades}}元</span>
						<span class="balashow" v-else> 余额 : **元</span>
					</div>
					<div class="carddes" v-show="cardInfo.card&&valueINput">
						<div class="linerow">
							<div class="rowinner">
								<span>水卡信息</span>
								<span></span>
							</div>
						</div>
						<div class="linerow">
							<div class="rowinner fonts">
								<span>卡号：</span>
								<span>{{cardInfo.real_card}}</span>
							</div>
							<div class="rowinner fonts">
								<span>姓名</span>
								<span>{{cardInfo.full_name}}</span>
							</div>
							<div class="rowinner fonts">
								<span>手机号码</span>
								<span>{{cardInfo.tel}}</span>
							</div>
						</div>
						<div class="linerow">
							<p class="fonts">地址信息</p>
							<span class="adddes fonts">{{cardInfo.card_address}}</span>
						</div>
					</div>
				</div>

			</div>

			<div class="shooseBox">
				<div class="templateInfo">
					<span>当前选择模板:{{template_title}}</span>
					<span v-if="overdue">模板有效期:已过期</span>
					<span v-else="">模板有效期:{{time}}</span>
				</div>
				<p class="pricep">选择或输入充值金额</p>
				<div class="chooseprice">
					<!--<div class="priceitem ac" @click="selectprice($event)">100元</div>
					<div class="priceitem" @click="selectprice($event)">200元</div>
					<div class="priceitem" @click="selectprice($event)">300元</div>
					<div class="priceitem" @click="selectprice($event)">500元</div>
					<div class="priceitem" @click="selectprice($event)">1000元</div>
					<div class="priceitem" @click="selectprice($event)">1500元</div>
					<div class="priceitem" @click="selectprice($event)">2000元</div>
					<div class="priceitem" @click="selectprice($event)">3000元</div>-->
					<div v-for="(item,index) in template" :key="index" v-bind:data-index="index" :class="{ 'ac' : index==indexActive}" class="priceitem" @click="selectprice(index)">
						<div class="recharge">{{item.recharge}}元</div>
						<div class="give">实得{{parseFloat(item.recharge) + parseFloat(item.give)}}元</div>
					</div>
					<div class="priceitem">
						<input type="number" v-model="money" placeholder="请输入充值金额" v-on:input="sr" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
					</div>
				</div>
				<div class="priceinput">
					<span class="centspan">充值金额:{{recharge_money}}元</span>
				</div>
				<div class="priceinput">
					<span class="givespan">赠送金额:{{give_money}}元</span>
				</div>
				<div class="payment">
					<button @click="payment" v-show="isPayment">去支付</button>
					<button v-show="!isPayment">去支付</button>
				</div>
				<div class="tip_red">备注:选择充值其它金额不享受模板优惠策略</div>

			</div>

		</div>
	</div>
</template>
<script>
	function dkq() {
		let script1 = document.createElement('script');
		script1.src = 'http://127.0.0.1:8008/YOWOCloudRFIDReader.js';
		document.body.appendChild(script1);
		let script2 = document.createElement('script');
		script2.src = '../../../static/js/dkq.js';
		document.body.appendChild(script2);
	}

	export default {
		name: 'ordinaryapply',
		data: function() {
			return {
				valueINput: '', //卡号
				PartnerQuota: [],
				cardInfo: [],
				money: '',
				give_money: 0,
				recharge_money: 0,
				template: [], //套餐信息
				indexActive: 'money_0', //选择套餐
				template_title: '',
				overdue: true,
				start_time: '',
				end_time: '',
				template_type: '',
				isPayment: true, //是否可以支付
				cardnum: '',
				datades: '',
				Key: '',
				Bn: '',
				Bn2:'',
				state: '未连接',
				order_sn:[],
                is_input:false, //是否输入充值金额
                template_id:'',
                LineIndex:0,
                ms_money:'',
			}
		},
		created: function() {
			var that = this;
			this.getPartnerQuota();
			this.getpartnerRecharge();
			this.script();
			this.getbk();
			setTimeout( function(){
				that.ReadCard();
				that.getcardnum();
			}, 2 * 1000 );
			//			this.indexActive = 'money_1';
			//			this.recharge_money = this.template[this.indexActive].recharge_money;
			//			this.give_money = this.template[this.indexActive].give_money;
		},
		inject: ['reload'],
		methods: {
			RefreshFun(){
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack(){
				this.$router.back(-1);
			},
			script: dkq,
			ReadCard() {

				var that = this;
				if(that.Key == '' || that.Bn == '') {
					this.$message({
						type: 'warning',
						showClose: true,
						message: '获取写卡参数失败!请稍后刷新页面重试~',
						center: true
					});
					return false;
				}
				var BlockID = that.Bn;
				var Key = that.Key;
				rfidreader.KeyMode = 1;
				rfidreader.KeyStringMode = 0;
				rfidreader.KeyString = Key;
				rfidreader.Repeat = 0
				rfidreader.M1ReadBlock(BlockID, 0);
				console.log('读卡')
			},

			getcardnum() {
				var that = this;
				rfidreader.onResult(function(resultdata) {
					console.log(resultdata.Result)

					switch(resultdata.FunctionID) {
						case 5:
							if(resultdata.Result > 0) {
								that.cardnum = (Array(10).join(0) + parseInt(resultdata.CardNo, 16)).slice(-10);
								that.datades = parseInt(resultdata.strData.substring(0, 10), 16) / 100;
							} else {
								that.$message({
									type: 'warning',
									showClose: true,
									message: GetErrStr(resultdata.Result),
									center: true
								});
							}
							if(resultdata.Result !=-1){
								that.state = '已连接'
							}
							break;
						case 6:
							//at.cardnum = parseInt(resultdata.CardNo, 16);
							if(resultdata.Result > 0) {
								that.LineIndex+=1;
								if(that.LineIndex==1){
									that.moneySet();
								}else if(that.LineIndex>=2){
									that.pz();
								}
								//that.ReadCard(); //重新读取卡的余额

								//alert("写入成功，写入16进制数据：" + resultdata.strData);
							} else {
								alert("写入失败，错误：" + GetErrStr(resultdata.Result));
							}
							break;
					}
				});
			},

			selectprice: function(index) {
				//$(obj).addClass('ac').siblings().removeClass('ac');
				this.indexActive = index;
				this.money = '';
				this.recharge_money = parseFloat(this.template[index].recharge);
				this.give_money = parseFloat(this.template[index].give);
                this.is_input = false;
			},
			notbalance() {
				this.$confirm('您当前账户余额不足', '请先去充值余额', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					this.$router.push({
						path: '/recharge'
					});
				}).catch(() => {

				});
			},
			//获取
			jumpbalance: function() {
				this.$router.push({
					path: '/recharge'
				})
			},
			//获取当前合伙人的余额
			getPartnerQuota: function() {
				var that = this;
				that.$post({
					url: "Partner/WaterCard/getPartnerQuota",
					data: {},
					success: (data) => {
						if(data.code == 1000) {
							that.PartnerQuota = data.data;
						}
					}
				})
			},
			// 搜索
			getwaterCardInfo: function() {
				var that = this;
				if(!that.valueINput) {
					this.$message({
						type: 'warning',
						showClose: true,
						message: '请输入卡号！',
						center: true
					});
					return false;
				}
				that.$post({
					url: "Partner/WaterCard/getWaterCard",
					data: {
						card: that.valueINput
					},
					success: (data) => {
						if(data.code == 1000) {
							that.cardInfo = data.data;
						} else {
							that.cardInfo = [];
							//alert(data.message);
							this.$message({
								type: 'warning',
								showClose: true,
								message: data.message,
								center: true
							});
						}
					}
				})
			},
			// 去支付
			payment: function() {
				var that = this;
				that.LineIndex = 0;
				//判断余额是否充足
				//var recharge_money = that.recharge_money.replace(/[^0-9]/ig,"");

				var recharge_money = parseFloat(that.recharge_money);
				var give_money = parseFloat(that.give_money);
				if(recharge_money <= 0) {
					this.$message({
						type: 'warning',
						showClose: true,
						message: '充值金额为不小于0的正确数字',
						center: true
					});
					return false;
				}
				if(Number(recharge_money) > Number(that.PartnerQuota.account_recharge_balance)) {
					that.notbalance();
					return false;
				}
				that.valueINput = that.cardnum;
				if(!that.valueINput) {
					// alert('请输入卡号！');
					this.$message({
						type: 'warning',
						showClose: true,
						message: '请输入卡号！',
						center: true
					});
					return false;
				}
				that.isPayment = false;
				that.$post({
					url: "Partner/WaterCard/waterCardRecharge",
					data: {
						card: that.valueINput,
						money: recharge_money,
						give: give_money,
                        template_id: that.is_input ? '' : that.template_id //默认充值模板没有ID，也不存在赠送问题
					},
					success: (data) => {
						if(data.code == 1000) {
							that.$message({
								type: 'success',
								showClose: true,
								message: '充值成功！',
								center: true
							});
							that.order_sn = data.data;
							that.getdata();

							//this.$router.push({path:'/rechargemanage'});
						} else {
							that.$message({
								type: 'error',
								showClose: true,
								message: data.message,
								center: true
							});
							//this.$router.push({path:'/cardrecharge'});
						}
						that.isPayment = true
						that.money = '';
						that.give_money = 0;
						that.recharge_money = 0;
						that.indexActive = 'money_0'; //选择套餐
						that.valueINput = '';
						that.getPartnerQuota();
						that.getpartnerRecharge();
					}
				})
			},

			sr: function() {
				//$('.chooseprice .priceitem').removeClass('ac');
				this.indexActive = 'money_0';
				this.give_money = 0;
				var money = parseFloat(this.money);
				if(money > 0) {
					this.recharge_money = money;
				} else {
					this.recharge_money = 0;
				}
                this.is_input = true;

			},
			//获取套餐信息
			getpartnerRecharge: function() {
				var that = this;
				// Ajax请求
				that.$post({
					url: 'Partner/Village/partnerRecharge',
					data: {},
					success: (data) => {
						if(data.code == 1000) {
							that.template = data.data.template;
							that.template_title = data.data.template_title;
							that.overdue = data.data.overdue;
							that.start_time = data.data.start_time;
							that.end_time = data.data.end_time;
							that.template_type = data.data.template_type;
						} else {
							that.$message.error(data.message);
						}

					}
				})
			},
			//获取key
			getdata() {
				var that = this;
				// Ajax请求
				that.$post({
					url: 'Partner/WaterCard/getdata',
					data: {
						cardNo: that.cardnum,
					},
					success: (data) => {
						if(data.code == 1000) {
							//this.script();
							//this.getcardnum();
							that.ms_money = data.data.ms;
							var BlockID = that.Bn;
							var Key = that.Key;
							var Data = data.data.ms;
							rfidreader.KeyMode = 1;
							rfidreader.KeyStringMode = 0;
							rfidreader.BeepOnSuccess = 0;
							rfidreader.KeyString = Key;
							rfidreader.Repeat = 0;
							rfidreader.M1WriteBlock(BlockID, Data, 0);
						} else {
							that.$message.error(data.message);
						}

					}
				})
			},
			moneySet(){
				var that = this;
				var BlockID = that.Bn2;
				var Key = that.Key;
				var Data = that.ms_money;
				rfidreader.KeyMode = 1;
				rfidreader.KeyStringMode = 0;
				rfidreader.BeepOnSuccess = 1;
				rfidreader.KeyString = Key;
				rfidreader.Repeat = 0;
				rfidreader.M1WriteBlock(BlockID, Data, 0);
			},
			//获取key
			getbk() {
				var that = this;
				that.$post({
					url: "Partner/WaterCard/getbk",
					data: {},
					success: (data) => {
						if(data.code == 1000) {
							var key = data.data.ck.substring(2, data.data.ck.length - 3);
							key = parseInt(key).toString(16);
							key = (Array(12).join(0) + key).slice(-12);
							that.Key = key;
							that.Bn = parseInt(data.data.bn, 16);
							that.Bn2 = parseInt(data.data.bn2, 16);
						}
					}
				})
			},
			//ping
			pz() {
				var that = this;
				that.$post({
					url: "Partner/WaterCard/save_recharge",
					data: {
						order_sn:that.order_sn,
						card:that.cardnum
					},
					success: (data) => {
						if(data.code == 1000) {
							that.ReadCard();
						}else{
							that.$message({
								type: 'error',
								showClose: true,
								message: data.message,
								center: true
							});
						}
					}
				})
			}

		},
		mounted() {

		},
		watch: {

		},
		computed: {
			time: function() {
				if(this.template_type == 1) {
					var time = this.start_time + '至' + this.end_time;
				} else if(this.template_type == 2) {
					var time = '永久有效';
				}
				return time
			}
		}
	}
</script>

<style>
	.cardrechargewrap {
		font-size: 16px;
		background: #fff;
	}

	#cardrecharge .balance {
		margin-top: 3px;
		padding: 10px 40px;
		background: #F2F3F3;
	}

	#cardrecharge .balance .btnb_style {
		border: none;
		width: 70px;
		height: 30px;
		color: #fff;
		font-weight: bold;
		font-size: 14px;
		background: #275485;
		margin-left: 40px;
		border-radius: 4px;
	}

	#cardrecharge .balspan {
		color: #FF6565;
		font-weight: bold;
		font-size: 22px;
	}

	#cardrecharge .centBox {
		margin-top: 20px;
		padding: 10px 40px;
		background: #F2F3F3;
	}

	#cardrecharge .centBox .searchitems {
		display: flex;
		align-items: center;
	}

	.balashow {
		margin-left: 20px;
	}

	#cardrecharge .linerow {
		display: flex;
		align-items: center;
		margin: 10px 0;
	}

	#cardrecharge .linerow p {
		margin: 0;
		width: 80px;
	}

	#cardrecharge .linerow .adddes {
		font-size: 14px;
		margin-left: 20px;
	}

	#cardrecharge .rowinner {
		display: flex;
		align-items: center;
		margin-right: 80px;
		color: #333433;
	}

	#cardrecharge .fonts {
		font-size: 14px;
		color: #313434;
	}

	#cardrecharge .rowinner span:last-child {
		margin-left: 20px;
		font-size: 14px;
	}

	#cardrecharge .rowinner span:first-child {
		width: 80px;
	}

	#cardrecharge .centBox .searchitems .el-input__inner {
		height: 43px!important;
		border: 1px solid #d3d4d4;
		border-radius: 4px;
		width: 200px;
	}

	.searchitems .el-input {
		height: 43px;
		border-radius: 4px;
		width: 200px;
	}

	#cardrecharge .centBox .searchitems button {
		height: 28px;
		line-height: 28px;
		padding: 0 25px;
		background-color: #2c5586;
		color: #fff;
		border: none;
		cursor: pointer;
		border-radius: 4px;
		margin-left: 30px;
	}

	#cardrecharge .shooseBox {
		width: 100%;
		background: #f2f3f3;
		margin-top: 20px;
	}

	#cardrecharge .chooseprice {
		margin: 0px 40px;
		width: 55%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		font-weight: bold;
		position: relative;
	}

	#cardrecharge .chooseprice .priceitem {
		width: 22%;
		text-align: center;
		border: 1px solid #060001;
		height: 40px;
		cursor: pointer;
		margin: 10px 0;
		border-radius: 8px;
		padding: 5px 0;
	}

	#cardrecharge .chooseprice .priceitem .recharge {
		line-height: 24px;
	}

	#cardrecharge .chooseprice .priceitem .give {
		line-height: 16px;
		font-size: 14px;
	}

	#cardrecharge .chooseprice .ac {
		border: 1px solid #bc1b21;
		color: #fff;
		background: #bc1b21;
		border-radius: 4px;
		/*background: url(../../../static/images/selecticon.png) no-repeat right bottom;*/
		background-size: 30px 30px;
	}
	/*#cardrecharge  .centspan{*/
	/*position: relative;*/
	/*bottom:0px;*/
	/*right: -85%;*/
	/*}*/

	#cardrecharge .pricep {
		padding: 20px 40px;
	}

	#cardrecharge .payment {
		display: flex;
		background: #f2f3f3;
		position: relative;
		width: 55%;
		padding-left: 40px;
	}

	#cardrecharge .payment button {
		width: 100%;
		right: 0;
		top: 15px;
		height: 40px;
		line-height: 40px;
		padding: 0 25px;
		background-color: #2c5586;
		color: #fff;
		border: none;
		cursor: pointer;
		border-radius: 4px;
		font-size: 16px;
	}

	#cardrecharge .priceinput {
		margin: 10px 40px;
		width: 55%;
		text-align: right;
	}

	#cardrecharge .priceinput .givespan {
		font-size: 16px;
	}

	#cardrecharge .priceitem input {
		width: 100%;
		text-align: center;
		border: 0;
		height: 40px;
		line-height: 40px;
		cursor: pointer;
		border-radius: 8px;
	}

	#cardrecharge .tip_red {
		color:#FF6565;
		font-size: 16px;
		margin: 20px 40px;
	}

	#cardrecharge .templateInfo {
		padding: 20px 40px 0;
	}

	#cardrecharge .templateInfo span+span {
		margin-left: 40px;
	}

	#cardrecharge .state {
		display: flex;
		align-items: center;
		padding-bottom: 15px;
	}
	#cardrecharge .red{
		color: #bc1b21;
	}
	#cardrecharge .green{
		color: #29af6b;
	}
</style>
